<script setup lang="ts">
import {useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import {getCurrentUser} from "@/api/user.ts";


const router = useRouter()

const user = ref()
onMounted(async () => {
  const res = await getCurrentUser()
  if (res.data.code === 0) {
    user.value = res.data.data
    user.value.tags = JSON.parse(user.value.tags)
  }else{
    router.push('/login')
  }
})

const show = ref(false)
const showAuthor = () => {
  show.value = true
}
</script>

<template>
  <template v-if="user">
    <div class="header">
      <van-row @click="$router.push('/user/info')">
        <van-col span="8">
          <van-image
            width="88"
            height="88"
            fit="cover"
            radius="10"
            :src="user.avatarUrl"
          />
        </van-col>
        <van-col span="16">
          <van-space direction="vertical" fill>
            <h3 style="margin: 2px 0;">{{ user.username }}</h3>
            <p class="userAccount">桃友账号：{{ user.userAccount }}</p>
          </van-space>
        </van-col>
      </van-row>
    </div>
    <van-cell title="简介" :label="user.profile?? '你还没有填写简介，快去介绍一下您自己吧~'" />
      <van-cell title="标签">
        <template #value>
          <van-tag v-if="user.tags?.length>0" color="#008811" style="margin: 0 2px;" v-for="item in user.tags" plain type="primary">{{ item }}</van-tag>
          <span v-else>您还没用选择标签~</span>
        </template>
      </van-cell>
    <van-grid>
      <van-grid-item icon="friends-o" text="加入的队伍" to="/user/team/join"/>
      <van-grid-item icon="shield-o" text="创建的队伍" to="/user/team/create"/>
      <van-grid-item icon="records-o" text="发布的帖子" to="/user/blog"/>
      <van-grid-item icon="service-o" text="问题反馈" @click="showAuthor"/>
    </van-grid>
    <van-cell title="个人信息" is-link to="/user/info"/>
    <van-cell title="设置" is-link to="/user/set"/>
    <van-dialog v-model:show="show" title="扫码联系作者" show-confirm-button>
      <van-image
        width="20rem"
        height="20rem"
        fit="contain"
        src="http://se837qsbo.hn-bkt.clouddn.com/FtDSa_N0mcFlwH4yYeLoOoOaaNJ9"
      />
    </van-dialog>
  </template>
</template>

<style scoped>
.van-cell{
  padding: 10px 16px;
}
*{
  margin: 0;
  padding: 0;
}
.userAccount{
  color: #a7a4a4;
  font-size: 12px;
}
.header{
  margin: 16px;
}
.van-dialong_contain{
  height: 200px !important
}
</style>